<template>
  <div class="container">
      <div class="order-detail">
        <view class='delivery-addr'>
            <view class='user-info'>
                <text class='item'>{{userAddrDto.receiver}}</text>
                <text class='item'>{{userAddrDto.mobile}}</text>
            </view>
            <view class='addr'>{{userAddrDto.province}}{{userAddrDto.city}}{{userAddrDto.area}}{{userAddrDto.area}}{{userAddrDto.addr}}</view>
        </view>
        <div class="prod-item">
            <div class="item-cont" @click='toProdPage'>
                <view class='prod-pic'>
                    <image :src='orderItemDtos.pic'></image>
                </view>
                <div class='prod-info'>
                    <view class='prodname'>{{orderItemDtos.prodName}}</view>
                    <view class='prod-info-cont'>
                        <text class='number'>数量:{{orderItemDtos.prodCount}}</text>
                        <text class='info-item'>{{orderItemDtos.skuName}}</text>
                    </view>
                    <view class='price-nums clearfix'>
                        <text class='prodprice'>
                            <text class='symbol'>￥</text>
                            <text class='big-num'>{{orderItemDtos.price}}</text>
                        </text>
                        <view class='btn-box'>
                            <text class='btn' v-if="orderItemDtos.status!=1">申请售后</text>
                            <text class='btn'>加购物车</text>
                        </view>
                    </view>
                </div>
            </div>
        </div>
        <div class='order-msg'>
            <div class='msg-item'>
                <view class='item'>
                    <text class='item-tit'>订单编号:</text>
                    <text class='item-txt'>{{orderNumber}}</text>
                    <text class='copy-btn' @click='copyBtn'>复制</text>
                </view>
                    <view class='item'>
                     <text class='item-tit'>下单时间:</text>
                     <text class='item-txt'>{{shopDetail.createTime}}</text>
                </view>
            </div>
            <div class='msg-item'>
                <view class='item'>
                    <text class='item-tit'>支付方式:</text>
                    <text class='item-txt'>微信支付</text>
                </view>
                <view class='item'>
                    <text class='item-tit'>配送方式:</text>
                    <text class='item-txt'>普通配送</text>
                 </view>
                <view class='item'>
                    <text class='item-tit'>订单备注:</text>
                    <text class='item-txt'>{{shopDetail.remarks}}</text>
                </view>
            </div>
        </div>
        <view class='order-msg'>
            <view class='msg-item'>
                <view class='item'>
                <view class='item-tit'>订单总额:</view>
                <view class='item-txt price'>
                    <text class='symbol'>￥</text>
                    <text class='big-num'>{{orderItemDtos.productTotalAmount*orderItemDtos.prodCount}}</text>
                </view>
                </view>
                <view class='item'>
                <view class='item-tit'>运费:</view>
                <view class='item-txt price'>
                    <text class='symbol'>￥</text>
                    <text class='big-num'>{{shopDetail.transfee}}</text>
                </view>
                </view>
                <view class='item'>
                <view class='item-tit'>优惠券:</view>
                <view class='item-txt price'>
                    <text class='symbol'>-￥</text>
                    <text class='big-num'>{{shopDetail.reduceAmount}}</text>
                </view>
                </view>
                <view class='item payment'>
                <view class='item-txt price'>
                    实付款:
                    <text class='symbol'>￥</text>
                    <text class='big-num'>{{shopDetail.actualTotal}}</text>
                </view>
                </view>
            </view>
        </view>
      </div>
      <view class='order-detail-footer'>
        <text class='dele-order' v-if="status==5||status==6">删除订单</text>
        <view class='footer-box'>
            <text class='apply-service'>联系客服</text>
            <text class='buy-again'>再次购买</text>
        </view>
      </view>
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
    data(){
        return {
            userAddrDto:{},
            orderItemDtos:{},
            orderNumber:''
        }
    },
    computed:{
        ...mapState({
            shopDetail: (state) => state.user.shopDetail,
        }),
    },
    mounted(){
        this.userAddrDto=this.shopDetail.userAddrDto
        this.orderItemDtos=this.shopDetail.orderItemDtos[0]
        this.orderNumber=this.$mp.query.orderNum
    },
    methods:{
        toProdPage(){
            wx.navigateTo({
                url:'/pages/category/prod/detail?prodId='+this.orderItemDtos.prodId
            })
        },
        copyBtn () {
            var ths = this;
            wx.setClipboardData({
            //准备复制的数据
                data: this.orderNumber,
                success: function(res) {
                    wx.showToast({
                        title: '复制成功',
                    });
                }
            })
        },
    }
}
</script>

<style src='./order-detail.css' scoped>

</style>